<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>HTML Effects</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#fadeElm {
	padding : 10px;
	width : 70%;
	background : #666;
	color : #eee;
}

#slider {
	position : absolute;
	padding : 5px;
	background : #ccc;
	left : 500px;
	top : 300px;
}

#flash {
}

#wiper {
	position : absolute;
	left : 300px;
	top : 400px;
	width : 200px;
	background : #ccc;
	-moz-opacity: 0.9999;
}

#wiper2 {
	position : absolute;
	left : 50px;
	top : 400px;
	width : 200px;
	background : #ccc;
	-moz-opacity: 0.9999;
}

#explode {
	position : absolute;
	left : 300px;
	top : 200px;
	background : #ddd;
	width : 400px;
	height : 300px;
	text-align : center;
	display : none;
}
</style>
<script language="JavaScript" type="text/javascript">
	// Dojo configuration
	djConfig = { 
		isDebug: true
	};
</script>
<script type="text/javascript" src="../../dojo.js"></script>
<script type="text/javascript" src="../../src/fx/html.js"></script>
<script type="text/javascript">
dojo.require("dojo.fx.*");

var fadeElem, flash, unflash, wiper;
dojo.addOnLoad(function() {
	dojo.fx.html.colorFadeIn("flash", 1500, [230, 230, 180], 1500);

	dojo.fx.html.colorFadeOut("unflash", 1500, [255, 200, 180], 1500);

	dojo.fx.html.wipeIn("wiper", 1000);
});

function testExplode(start) {
	var end = document.getElementById("explode");
	dojo.fx.html.explode(start, end, 250);
}

function testImplode(start) {
	var end = document.getElementById("explode");
	dojo.fx.html.implode(end, start, 250);
}

function wowi(node) {
	var h = node.offsetHeight;
	dojo.fx.wipeOut(node, null, function(n) {
		n.innerHTML = "I have been replaced "
			+ "with something completely different "
			+ "in the middle of the wipe effects.";
		dojo.fx.wipeIn(n);
	});
}
</script>
</head>
<body>
	<a href="javascript:void(dojo.fx.html.fadeOut(document.getElementById('fadeElm'), 500))">Fade out</a>
	|
	<a href="javascript:void(dojo.fx.html.fadeIn(document.getElementById('fadeElm'), 500))">Fade in</a>
	|
	<a href="javascript:void(dojo.html.setOpacity(document.getElementById('fadeElm'), 0.5))">Set opacity = 50%</a>

	<div id="fadeElm">Element to fade</div>

	<a href="javascript:void(dojo.fx.html.slideTo(document.getElementById('slider'), 500, [200, 200]))">Slide to: 200, 200</a>
	|
	<a href="javascript:void(dojo.fx.html.slideBy(document.getElementById('slider'), 500, [200, 200]))">Slide by: 200, 200</a>
	|
	<a href="javascript:void(dojo.fx.html.slide(document.getElementById('slider'), 500, [200, 200], [500, 500]))">Slide from 200, 200 to 500, 500</a>
	<div id="slider">I slide</div>

	<div id="flash">I fade to my BG!</div>
	<div id="unflash">I fade from my BG!</div>

	<div id="wiper">
		<a href="javascript:void(dojo.fx.html.wipeOut(document.getElementById('wiper'), 1000))">Wipe out</a> wipe wipe. It is so fun to...
		Wipe wipe wipe. It is so fun to...
		Wipe wipe wipe. It is so fun to...
		Wipe wipe wipe. It is so fun to...
	</div>

	<div id="wiper2">
		This one does a wipeOut+wipeIn that you could use
		to replace the content. Go ahead, give it a
		<a href="javascript:;" onclick="wowi(this.parentNode)">try</a>
	</div>

	<div>Non-wipe...</div>

	<div id="explode">EXPLODE!!!</div>
	<a href="javascript:;" onclick="testExplode(this)">Explode!</a>
	<a href="javascript:;" onclick="testImplode(this)">Implode!</a>
</body>
</html>

